<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /**
            背景颜色不会被继承

            选择器优先级
                选择器权重
                    内联样式          1,0,0,0
                    id选择器          0,1,0,0
                    类和伪类选择器     0,0,1,0
                    元素选择器         0,0,0,1
                    通配选择器         0,0,0,0
                    继承的样式         没有优先级

                比较优先级时，需要将所有的选择器的优先级进行相加计算，最后有限级越高，则显示优先级越高的（分组选择器时单独计算的）

                选择器的累计不会超过其最大的数量级，类选择器再高也不会超过id选择器

                可以在某一个样式后面加上 !important ，则此时该样式会获取到最高的优先级，甚至超过了内联样式
                    -- 注意：在开发中慎用！！

            em 
                - em是相对于自身元素的字体大小来计算的
                - 1em = 1font-size
                - em会根据字体的大小改变而改变

            rem
                - 相对于根元素的字体大小来计算的
            
            RGB    颜色单位：
                    在css中可以直接使用颜色名来设置各种颜色
                        比如：red,orange,yellow,blue...
                    但是在css中直接使用颜色名字是非常不方便的

                    rgb值
                    -   rgb通过三种颜色的不同浓度来调配出不同的颜色
                    - R red G green B blue
                    - 每一种颜色的范围在0-255（0% - 100%）之间
                    - 语法： RGB（红色，绿色，蓝色）
            RGBA
                -就是在rgb的基础上增加了一个a表示透明度
                - 第四个值表示透明度
                - 1表示完全不透明 0 表示完全透明，.5表示半透明

            十六进制的RGB值
                语法：#红色绿色蓝色
                - 颜色浓度通过 00-ff
                - 如果颜色两位重复可以进行简写

             
            HSL值 HSLA值
                H 色相（0 - 360）
                S 饱和度，颜色的浓度0% - 100%
                L 亮度，颜色的亮度 0% - 100%

            */
        p{
            color: red;
        }

        div{
            color: greenyellow;
        }
    </style>
</head>
<body>
    <p>
        我是一个p元素
        <span>我是p元素中的span</span>
    </p>
    <span>
        我是span元素外的span
    </span>

    <div>
        我是div
        <span>
            我是div中span 
            <em>我是span中的em</em>
        </span>
    </div>
</body>
</html>